<template>
  <nly-content-wrapper>
    <nly-content>
       <a-tabs type="card" style="margin-top: 40px; height: 100%;" @change="tabChange">
          <a-tab-pane key="1" tab="订单管理">
            <nly-row class="ml-1 mb-2 lr mt-4" >
            </nly-row>   
            <div style="margin-top: -10px">
              <a-button type="primary" class="crm-btn" @click="PageList()">所有订单</a-button>
              <a-button type="primary" class="crm-btn" @click="PageList(0)">待付款</a-button>
              <a-button type="primary" class="crm-btn" @click="PageList(1)">已付款</a-button>
            </div>
            <!-- 列表 -->
            <a-table
              :columns="columns"
              :components="components"
              :data-source="data"
              :scroll="{ x: 500, y: 500}"
              style="height: calc(100vh - 15rem);"
              bordered
              :pagination="pagination"
              @change="onTableChange"
              ></a-table>
          </a-tab-pane>
        </a-tabs>
        <a-modal v-model="orderPayVisible" title="订单支付" centered on-ok="handleok" width="650px">
          <div id="components-form-demo-advanced-search">
            <div class="line" style="color:#1980Ff;font-size:15px;margin-top:30px;">支付方式</div>
            <div style="margin-top:20px;margin-left:50px;">
              <a-radio-group v-model="payMethod">
                <a-radio :value="1">
                  <img src="@/assets/image/alipay.png" />
                </a-radio>
                <a-radio :value="2">
                  <img src="@/assets/image/wxpay.png" style="height: 25px;"/>
                </a-radio>
              </a-radio-group>
            </div>
          </div>
          <template slot="footer">
            <a-button key="submit" type="primary" @click="orderPay">立即支付</a-button>
            <a-button key="back" @click="() => (orderPayVisible = false)">取消</a-button>
          </template>
        </a-modal>
        <a-modal v-model="wxPayVisible" title="微信支付" centered on-ok="handleok" width="800px">
          <div>
           <!-- <span>应付金额2599.00元</span>  -->
          </div>
          <div style="margin-top: 20px;">
            <img style="margin-left: 40px; height: 250px; width: 250px" :src="payCodeImg">
            <img style="margin-left: 40px; height: 300px;" src="@/assets/image/pc_icon_phone-bg.png">
          </div>
          <template slot="footer">
            <a-button key="back" @click="() => (wxPayVisible = false)">取消</a-button>
          </template>
        </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import { listToMap } from "@/utils/tool/map";
import { components } from "@/utils/antTableComponents";
import { orderPage, getOrderDetail, deleteOrder, aliPay, wxPay } from "@/api/member/order";

const basePostData = {
  current: 1,
  size: 20
};

export default {
  data() {
    const columns = [
      {
        title: "订单号",
        dataIndex: "orderNo",
        key: "orderNo",
        align: "left",
        width: 120
      },
      {
        title: "订单日期",
        dataIndex: "createDate",
        key: "createDate",
        width: 120
      },
      {
        title: "订单类型",
        dataIndex: "orderType",
        key: "orderType",
        width: 80,
        customRender: (text, row, index) => {
          return text == 1 ? "购买" : "升级";
        }
      },
      {
        title: "商品名称",
        dataIndex: "goodsName",
        key: "goodsName",
        width: 120
      },
      {
        title: "用户数量",
        dataIndex: "users",
        key: "users",
        width: 80
      },
      {
        title: "使用年限",
        dataIndex: "years",
        key: "years",
        width: 80
      },
      {
        title: "折扣",
        dataIndex: "discountRate",
        key: "discountRate",
        width: 80
      },
      {
        title: "付款金额",
        dataIndex: "salePrice",
        key: "salePrice",
        width: 80
      },
      {
        title: "付款状态",
        dataIndex: "orderStatus",
        key: "orderStatus",
        width: 80,
        customRender: (text, row, index) => {
          return text ? "已付款" : "未付款";
        }
      },
      {
        title: "付款时间",
        dataIndex: "payDate",
        key: "payDate",
        width: 120,
        customRender: (text, row, index) => {
          return text;
        }
      },
      {
        title: "密钥",
        dataIndex: "secretKey",
        key: "secretKey",
        width: 120,
        customRender: (text, row, index) => {
          return text;
        }
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "id",
        width: 80,
        customRender: (text, row, index) => {
          if (!row.orderStatus) {
            return (
              <div class="icons-list">
                <a
                  href="javascript:;"
                  title="支付"
                  class="mr-1 col-1"
                  onClick={() => (this.orderPayVisible = true, this.orderId = row.id)}
                >
                  支付
                </a>
                <a
                  href="javascript:;"
                  title="删除"
                  class="mr-1 col-1"
                  onClick={() => this.deleteOrder(row.id)}
                >
                  删除
                </a>
              </div>
            );
          }
        }
      }
    ];

    //表格 头部 可伸缩
    this.components = components(columns);
    return {
      orderId: "",
      orderPayVisible: false,
      wxPayVisible: false,
      payCodeImg: "",
      payMethod: 1,
      tabKey: 1,
      postData: { ...basePostData },
      data: [],
      columns,
      pagination: {
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems: true
      }
    };
  },
  mounted() {
    this.PageList();
  },
  methods: {
    //tab 切换
    tabChange(key) {
      console.log(key);
      this.tabKey = key;
      this.PageList();
    },
    //删除订单
    deleteOrder(orderId) {
      let _this = this;
      this.$confirm({
        title: '提示',
        content: '您确定要删除该订单吗？',
        onOk() {
            deleteOrder({id: orderId}).then(response => {
              if(response.code == 200) {
                _this.$message.success("删除成功");
                _this.PageList();
              }else {
                _this.$message.error(response.message);
              }
            });
        },
        onCancel() {
        },
      });
    },
    // 获取列表
    PageList(orderStatus) {
      const { postData } = this;
      postData.orderStatus = orderStatus;
      orderPage(postData).then(response => {
        if (response.code === 200) {
            const { data } = response;
            const { records, total, current, size } = data;
            this.data = records;
            Object.assign(this.pagination, {
              total
            });
          }
        }).catch(error => {});
    },
    //订单支付
    orderPay() {
      if(this.payMethod == 1) {
        aliPay({
          orderId: this.orderId
        }).then(response => {
          this.gotoPayUrl(response);
        });
      }else {
        wxPay({
          orderId: this.orderId
        }).then(response => {
          console.log(response);
          this.payCodeImg = response.data;
          this.wxPayVisible = true;
          let wxPayInterval = window.setInterval(() => {
            setTimeout(this.wxPayResult(wxPayInterval, this.orderId), 0);
          }, 5000);
        });
      }
    },
    gotoPayUrl(response) {
      var win = window.open("", "支付");
      win.document.open();
      win.document.write(response);
      win.document.close();
      this.orderPayVisible = false;
      this.wxPayVisible = false;
      this.PageList();
    },
    //微信支付结果
    wxPayResult(wxPayInterval, orderId) {
      console.log("==============请求成功==============");
      getOrderDetail({orderId: orderId}).then(res => {
        if(res.code == 200) {
          if(res.data.orderStatus == 1) {
            this.$message.success("支付成功");
            this.orderPayVisible = false;
            this.wxPayVisible = false;
            this.PageList();
            clearInterval(wxPayInterval);
          }
        }else {
          clearInterval(wxPayInterval);
        }
      }); 
    },
    //table分页触发
    onTableChange(pagination, filters, sorter) {
      Object.assign(this.postData, {
        current: pagination.current,
        size: pagination.pageSize
      });
      Object.assign(this.pagination, {
        current: pagination.current,
        pageSize: pagination.pageSize
      });
      this.PageList();
    },
    changePageSize(e) {
      const value = e.target.value;
      const { pagination } = this;

      console.log(e, value);
      Object.assign(this.postData, {
        size: value
      });
      Object.assign(this.pagination, {
        pageSize: Number.parseInt(value)
      });
      this.PageList();
    },
    reset() {
      this.postData = { ...basePostData };
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.detailData];
      const target = dataSource.filter(item => key === item.key)[0];
      if (target) {
        target[dataIndex] = value;
        this.detailData = dataSource;
      }
    },
  },
  watch: {}
};
</script>
<style scoped>
.editer >>> .w-e-menu {
  padding: 5px 9px;
}

.form-inline label {
  justify-content: left !important;
}
.form-inline > .col {
  margin-bottom: 1.5rem !important;
}
.icons-list >>> .anticon {
  margin-right: 8px;
  font-size: 16px;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

/* tile uploaded pictures */
.upload-list-inline >>> .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
.ant-popover-inner {
  z-index: 2999;
}
/* .crm-btn {
  margin-left: 10px;
  margin-bottom: 10px;
} */
</style>
